import React from "react"
import { NavBar, Icon, Tabs, WhiteSpace  } from 'antd-mobile';
import {getFensi} from "./api/index"
import getFensi2 from './guanzhu.module.css'
import {List} from "antd-mobile"
const Item = List.Item
class Fensi extends React.Component{
    constructor(){
        super()
        this.state={
            list:[],
            uid:102061341
        }
    }
    componentDidMount(){
        getFensi(this.state.uid)
        .then(body=>body.json())
        .then(res=>{
            // console.log(res)
            this.setState({
                list:res.followeds
            })
            console.log(this.state.list)
        })
    }
    Huitui(){
        this.props.history.go(-1)
    }
    handle(){
        console.log(123)
    }
    render(){
        return(
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" onClick={this.Huitui.bind(this)}/>}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <img src={require('./img/音乐.png')}/>,
                    ]}
                    className={getFensi2.header}>粉丝</NavBar>
                <List>
                    {this.state.list.map((item,index)=>(
                        <Item
                        thumb={item.avatarUrl}
                        onClick={this.handle.bind(this)}
                        extra="..."
                        className={getFensi2.guanzhu}
                        key={item.index}
                        >
                            <p>{item.nickname}</p>
                            <div>{item.signature}</div>
                        </Item>
                    ))}
                </List>
            </div>
            
            
        )
    }
}

export default Fensi